<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Vector Layer ZIndex Test</title>
    <style type="text/css">
        body {
            font-size: 0.8em;
        }
        p {
            padding-top: 1em;
        }
        #map {
            margin: 1em;
            width: 512px;
            height: 512px;
        }
    </style>

    <script src="../../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, layerA, layerB, layerV, selectControl1, selectControl2;

        function init() {
            map = new OpenLayers.Map('map');
            var wmsLayer = new OpenLayers.Layer.WMS(
                "OpenLayers WMS", 
                "http://labs.metacarta.com/wms/vmap0",
                {layers: 'basic'}
            );

            layerV = new OpenLayers.Layer.Vector('v');
            var feature = new OpenLayers.Feature.Vector(
                new OpenLayers.Geometry.Polygon([
                    new OpenLayers.Geometry.LinearRing([
                        new OpenLayers.Geometry.Point(-110, 60),
                        new OpenLayers.Geometry.Point(-110, 30),
                        new OpenLayers.Geometry.Point(-80, 30),
                        new OpenLayers.Geometry.Point(-110, 60)
                    ])
                ])
            );
            layerV.addFeatures([feature]);
            selectControl1 = new OpenLayers.Control.SelectFeature(layerV);
            selectControl2 = new OpenLayers.Control.SelectFeature(layerV, {
                hover: true,
                selectStyle: OpenLayers.Util.applyDefaults({fillColor: "red"}, OpenLayers.Feature.Vector.style["select"]),
                onSelect: function(feature) {
                    selectControl2.unselect(feature);
                    layerV.drawFeature(feature, selectControl2.selectStyle);
                }
            });
            selectControl2.events.register("beforefeatureselected", null, function(feature) {
                layerV.drawFeature(feature, selectControl2.selectStyle);
                return false;
            })

            layerA = new OpenLayers.Layer('a', {'isBaseLayer': false});
            layerB = new OpenLayers.Layer.WMS(
                'b', 'http://www2.dmsolutions.ca/cgi-bin/mswms_gmap', {
                    'layers': [
                        'bathymetry', 'land_fn', 'park', 'drain_fn', 'drainage',
                        'prov_bound', 'fedlimit', 'rail', 'road', 'popplace'
                    ],
                    'transparent': 'true',
                    'format': 'image/png'
                }, {
                    'reproject': false
            });

            map.addLayers([wmsLayer, layerV, layerA, layerB]);
            map.addControl(selectControl2);
            map.addControl(selectControl1);
            map.addControl(new OpenLayers.Control.MousePosition());
            selectControl2.activate();
            selectControl1.activate();

            map.setCenter(new OpenLayers.LonLat(-90, 20), 2);
        }

        function removeLayerA() {
            if (OpenLayers.Util.indexOf(map.layers, layerA) > -1) {
                map.removeLayer(layerA);
            }
        }
        
        function toggleSelectControl1() {
            if (selectControl1.active) {
                selectControl1.deactivate();
                alert("SelectFeature control for clicks deactivated.");
            } else {
                selectControl1.activate();
                alert("SelectFeature control for clicks activated.");
            }
        }

        function toggleSelectControl2() {
            if (selectControl2.active) {
                selectControl2.deactivate();
                alert("SelectFeature control for hover deactivated.");
            } else {
                selectControl2.activate();
                alert("SelectFeature control for hover activated.");
            }
        }
    </script>
  </head>
  <body onload="init()">
    <h1 id="title">Vector Layer ZIndex Test</h1>
    <div id="map"></div>
    <p>

    The map includes one base layer (vmap0) and three overlays, namely a vector
    layer, a fake layer with no images, and a dmsolutions layer. The overlays are
    added to the map in this order: the vector layer, the fake layer, and the
    dmsolutions layer. The map also includes a select feature control, which
    when activated bumped the vector layer z-index to some high value. This
    makes feature selection work, even though other overlays were added after
    the vector layer.
       
    </p>
    <p>

    If the fake layer is removed from the map (first link below), the vector layer's
    z-index must not be reset, so the vector layer must not go under the
    dmsolutions layer and feature selection must continue to function as
    expected.
       
    </p>
    <p>

    If one of the SelectFeature controls is deactivated or activated (second
    and third link below), the vector layer should change it's position in the
    layer stack: on top if at least one of the controls is activated, covered
    by other layers if both are deactivated.

    </p>

    <p>
      <a href="javascript:removeLayerA()">Remove the fake layer</a>
      <br/><a href="javascript:toggleSelectControl1()">Toggle the click SelectFeature control's active status</a>
      <br/><a href="javascript:toggleSelectControl2()">Toggle the hover SelectFeature control's active status</a>
    </p>
  </body>
</html>
